<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>DD auto scroll demo</title>
    <style>
        .ks-dd-proxy {
            position: absolute;
            left:-9999px;
            top:-9999px;
        }

        .ks-dd-proxy {
            opacity: 0.5;
        }

        #container {
            position: relative;
            overflow: hidden;
            width: 400px;
            height: 400px;
            border: 1px red solid;
        }

        #component {
            position: absolute;
            left: 40px;
            top: 40px;
            width: 100px;
            height: 100px;
            background: green;
            -ms-touch-action:none
            -ms-user-select:none;
        }

        #free {
            background: red;
            position: absolute;
            left: 600px;
            top: 200px;
            width: 100px;
            height: 100px;
        }

        .pad {
            width: 1000px;
            height: 100px;
            margin: 40px;
            border: 1px solid purple;
        }

        .top {
            height: 20px;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid purple;
            background: black;
            color: white;
            text-align: center;
        }

        .bottom {
            height: 20px;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            border: 1px solid purple;
            background: black;
            color: white;
            text-align: center;
        }

        .left {
            height: 100%;
            *height: expression(this.parentNode.offsetHeight);
            width: 20px;
            position: absolute;
            left: 0;
            top: 0;
            border: 1px solid purple;
            background: black;
            color: white;
            text-align: center;
        }

        .right {
            height: 100%;
            *height: expression(this.parentNode.offsetHeight);
            width: 20px;
            position: absolute;
            right: 0;
            top: 0;
            border: 1px solid purple;
            background: black;
            color: white;
            text-align: center;
        }

        .fix-top {
            height: 20px;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            text-align: center;
            background: yellow;
        }

        .fix-bottom {
            height: 20px;
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            text-align: center;
            background: yellow;
        }

    </style>
</head>
<body>

<div class="fix-top">
    拖动红色块时 鼠标到此之上 window 向上滚动
</div>

<div class="fix-bottom">
    拖动红色块时 鼠标到此之下 window 向下滚动
</div>

<div style="height:100px;">

</div>
<div style="position:relative;width:400px;">
    <div class="top">
        拖动绿色块时 鼠标到此之上 容器向上滚动
    </div>
    <div class="bottom">
        拖动绿色块时 鼠标到此之下 容器向下滚动
    </div>
    <div class="left">
        拖动绿色块时 鼠标到此之左 容器向左滚动
    </div>
    <div class="right">
        拖动绿色块时 鼠标到此之右 容器向右滚动
    </div>
    <div id="container">
        <br><br><br><br><br><br><br><br><br><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;容器
        <div class="pad">
            1.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>
        <div class="pad">
            2.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>
        <div class="pad">
            3.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>
        <div class="pad">
            4.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>
        <div class="pad">
            5.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>
        <div class="pad">
            6.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>
        <div class="pad">
            7.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>
        <div class="pad">
            8.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>
        <div class="pad">
            9.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>
        <div class="pad">
            0.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>
        <div class="pad">
            11.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>
        <div class="pad">
            12.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>
        <div class="pad">
            13.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>
        <div class="pad">
            14.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>
        <div class="pad">
            15.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>
        <div class="pad">
            16.asdfasdfasdfasdfasdfuiwyeriqwemnxb vzxm,ioasytuiwertkmxcn z,xnvioasyertiowhreknz,xmn ,mzxbiusery
        </div>


        <div id="component">

        </div>

    </div>
</div>

<div class="pad">
    pad 1
</div>

<div class="pad">
    pad 2
</div>

<div class="pad">
    pad 3
</div>

<div class="pad">
    pad 4
</div>

<div class="pad">
    pad 5
</div>

<div class="pad">
    pad 6
</div>

<div id="free">

</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>


    KISSY.use("dd", function (S, DD) {

        var Draggable = DD.Draggable,
                Scroll = DD.Scroll;

        (function () {
            var drag = new Draggable({
                node: '#component',
                move: 1,
                groups:false
            });

            drag.plug(new Scroll({
                // container 容器自动滚动
                node: "#container",
                //滚动速度
                rate: [10, 10],
                //容器边缘高宽度
                diff: [20, 20]
            }));
        })();


        (function () {
            var drag = new Draggable({
                node: '#free',
                move: 1,
                groups:false
            });

            drag.plug(new Scroll({
                //默认 window 自动滚动，相当于
                //node :window
                rate: [20, 20],
                diff: [20, 20]
            }));

            drag.plug(new DD.Proxy());

        })();


    });


</script>
</body>
</html>